<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="blog/index/include_blog::header"></head>
<body>
	<nav th:include="blog/index/include_blog::nav"  class="navbar navbar-default navbar-custom navbar-fixed-top" ></nav>
	<header class="intro-header"
		style="background-image: url('/img/blog/home-bg.jpg')">
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
					<div class="site-heading">
						<h1>源码集市</h1>
						<span class="subheading">源码集市</span>
					</div>
				</div>
			</div>
		</div>
	</header>

	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div class="columns pull-left col-md-4">
					<input id="title" name="title" type="text" class="form-control" placeholder="标题">
				</div>
				<div class="columns pull-left col-md-2">
					<button class="btn btn-success" onclick="bindList(0,'cover')">查询</button>
				</div>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
				<div id="incomeNum"></div>
				<div class="clearfix">
					<p id="flagLoaded" style="display: none; text-align: center;">已全部加载</p>
					<a id="flagLoad" style="display: none;" class="btn btn-secondary float-right"
						href="javascript:void(0)" onclick="nextPage()">更早 &rarr;</a>
				</div>
			</div>
		</div>
	</div>
	</body>
	<div th:include="blog/index/include_blog::footer"></div>
	<script type="text/javascript">
		var limit = 10;
		var currentPage = 0;
		var total;
		$(function(){
			bindList(0, 'append');
		});

		function nextPage() {
			bindList(currentPage * limit, 'append')
		}

		/**
		 * 加载文章
		 * @param offset 页数
		 * @param mode 加载模式（cover:覆盖、summation：累加）
		 */
		function bindList(offset, mode) {
			$.ajax({
				url : 'blog/open/list',
				method : 'get',
				data: {
					'type': 'article',
					'title': $("#title").val(),
					'limit': 10,
					'offset': offset
				},
				dataType : 'json',
				success : function(data) {
					var rows = data.rows;
					total = data.total;
					var htmlText = "";
					for (i = 0; i < rows.length; i++) {
						htmlText += '<div class="post-preview post-preview-flax">';
						if (rows[i].cover != null && rows[i].cover != '') {
							htmlText += '<img src="/files' + rows[i].cover + '" width="30%">';
						}
						htmlText += '<div>';
						htmlText += '<a href="/blog/open/post/' + rows[i].cid + '">';
						htmlText += '<h2 class="post-title">';
						htmlText += rows[i].title;
						htmlText += '</h2>';
						htmlText += '</a>';
						htmlText += '<p class="post-meta">作者：<a href="#">' + rows[i].author + '</a> &nbsp;&nbsp; ' + rows[i].gtmModified + '</p>';
						htmlText += '</div>';
						htmlText += '</div>';
						htmlText += '<hr>';
					}
					if (mode === 'append') {
						$("#incomeNum").append(htmlText);
					}else if (mode === 'cover') {
						$("#incomeNum").html(htmlText);
					}
					document.getElementById("flagLoad").style.display = "block";
					currentPage++;
					if (total <= currentPage * limit) {
						document.getElementById("flagLoaded").style.display = "block";
						document.getElementById("flagLoad").style.display = "none";
					}
				}
			});
		}
	</script>


</html>
